<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>冒泡排序示例</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-message/dist/ew-message.min.css">
    <style>
        body {
            font-family: '微软雅黑', sans-serif;
            background-color: #f7f9fc;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        .container {
            width: 80%;
            max-width: 800px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #4caf50;
            text-align: center;
        }

        .array-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .array-item {
            width: 50px;
            height: 50px;
            margin: 5px;
            background-color: #4caf50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            font-size: 18px;
            transition: background-color 0.5s ease;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        .status {
            font-size: 16px;
            text-align: center;
            margin-top: 20px;
            color: #333;
        }

        .status span {
            font-weight: bold;
            color: #4caf50;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>冒泡排序示例</h1>

        <div class="array-container" id="array-container">
            <!-- 排序的数字会展示在这里 -->
        </div>

        <div class="button-container">
            <button onclick="startSorting()">开始排序</button>
            <button onclick="generateArray()">生成新数组</button>
        </div>

        <div class="status" id="status">
            当前状态: <span>未开始</span>
        </div>
    </div>

    <script src="https://www.unpkg.com/ew-message/dist/ew-message.min.js"></script>
    <script>
        let data = [];
        const arrayContainer = document.getElementById('array-container');
        const statusContainer = document.getElementById('status');

        // 随机生成一个数组
        const generateArray = () => {
            data = [];
            for (let i = 0; i < 10; i++) {
                data.push(Math.floor(Math.random() * 100));
            }
            renderArray(data);
        };

        // 渲染数组
        const renderArray = (d) => {
            arrayContainer.innerHTML = '';
            d.forEach((num, index) => {
                const item = document.createElement('div');
                item.className = 'array-item';
                item.textContent = num;
                item.setAttribute('data-index', index);
                arrayContainer.appendChild(item);
            });
        };

        // 冒泡排序算法
        const bubbleSort = arr => {
            let swapped = false;
            let a = [...arr];
            for (let i = 0; i < a.length; i++) {
                swapped = false;
                for (let j = 0; j < a.length - i - 1; j++) {
                    if (a[j + 1] < a[j]) {
                        // 数组解构交换
                        [a[j], a[j + 1]] = [a[j + 1], a[j]];
                        swapped = true;
                    }
                }
                if (!swapped) {
                    break;
                }
            }
            return a;
        };

        // 开始排序
        const startSorting = () => {
            if (data.length === 0) {
                ewMessage.warning('请先生成一个数组');
                return;
            }

            statusContainer.innerHTML = '当前状态: <span>排序中...</span>';
            setTimeout(() => {
                const newArr = bubbleSort(data);
                renderArray(newArr)
                statusContainer.innerHTML = '当前状态: <span>排序完成</span>';
            }, 1000);
        };

    </script>

</body>

</html>